semantic elements

revision:


Content

semantics syntax some examples


semantics

top

Elements such as <header>, <footer> and <article> are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them. Elements such as <header>, <nav>, <section>, <article>, <aside>, and <footer> act more or less like <div> elements. They group other elements together into page sections.

The semantic elements added in HTML5 are:

the <article> element, which specifies independent, self-contained content. An article should make sense on its own, and it should be possible to distribute it independently from the rest of the web site.

the <aside> element, which defines some content aside from the content it is placed in (like a sidebar). The <aside> content should be indirectly related to the surrounding content.

the<details>element, which defines additional details that the user can view or hide.

the <figcaption> tag, which defines a caption for a <figure> element. The <figcaption> element, which can be placed as the first or as the last child of a <figure> element.

the <figure> tag, which specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

the <footer> element, which defines a footer for a document or section. A <footer> element typically contains: authorship information, copyright information, contact information, sitemap, back to top links, related documents

the <header> element, which represents a container for introductory content or a set of navigational links.A <header> element typically contains: one or more heading elements (<h1> - <h6>), logo or icon, authorship information

the <main> element, which specifies the main content of a document.

the <mark> element, which is used to mark a part of the text which has relevance. It can be used to highlight a text for showing emphasis, highlight search terms in search results to provide context, or distinguish a new content added by the user by showing it differently.

the <nav> element, which defines a set of navigation links.

the <section> element, which defines a section in a document. According to W3C's HTML documentation: "A section is a thematic grouping of content, typically with a heading." A web page could normally be split into sections for introduction, content, and contact information.

the <h3> tag, which defines a visible heading for a <details> element

the <time> element, which defines a human-readable time on a 24-hour clock or a precise date in the Gregorian calendar.

Comments

You can have several <header> elements in one HTML document. However, <header> cannot be placed within a <footer>, <address> or another <header> element. You can have several <footer> elements in one document.


syntax

top
        <article> . . . </article>
        <aside> . . . </aside>
        <details> . . . </details>
        <figcaption> . . . </figcaption>
        <figure> . . . </figure>
        <footer> . . . </footer>
        <main> . . . </main>
        <mark> . . . </mark>
        <nav> . . . </nav>
        <section> . . . </section>
        <h3> . . . </h3>
        <time> . . . </time>

    

some examples

top

Google Chrome

Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!

code:
            <article>
                <h3>Google Chrome</h3>
                <p class="spec">Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
            </article>
        

code:
            <nav>
                <a href="/html/">HTML</a>                                                                                                                                                                                                    
                <a href="/css/">CSS</a> 
                <a href="/js/">JavaScript</a> 
                <a href="/jquery/">jQuery</a>
            </nav>
        

code:
            <aside>
                <h4>Self portraits</h4>
                <p class="spec">Van Gogh created more than 43 self-portraits between 1885 and 1889. They were usually completed in series, such as those 
                painted in Paris in mid-1887, and continued until shortly before his death. Generally  the portraits were studies, created during introspective periods
                when he was reluctant to mix with others, or when he lacked models, and so painted himself.</p>
            </aside>